<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>手机商城</title>
    <!-- CSS -->
    <link rel="stylesheet" href="{url:#css/materialize.min.css}"/>
    <link rel="stylesheet" href="{url:#css/me.css}"/>
    <link rel="stylesheet" href="{url:#css/iconfont.css}"/>

    <!-- JS -->
    <script src="{url:#js/jquery-1.11.3.min.js}"></script>
    <script src="{url:#js/materialize.min.js}"></script>
</head>
<body>
<!-- TitleBar 开始 -->
<div class="navbar-fixed">
    <nav>
        <div class="nav-wrapper red accent-4 valign-wrapper">
            <ul class="left" id="nav-btn-left">
                <li><a><i class="iconfont">&#xe63c;</i></a></li>
            </ul>
            <span class="title-bar-size center_align">选择城市( 市 或 区 )</span>
            <ul class="right">
                <li><a style="font-size: 1.1em;font-weight: bold;vertical-align: middle;line-height: 56px;" onclick="onsure()">确定</a></li>
            </ul>
        </div>
    </nav>
</div>
<!-- TitleBar 结束 -->

<div class="container row center">
    <div class="col s4">
        <div class="collection" id="div_province">
        	{list:items=$province_list key=$i}
        		{if:$i==0}
        			<a id="{$item['id']}" href="javascript:;" class="collection-item active">{$item['name']}</a>
        		{else:}
        			<a id="{$item['id']}" href="javascript:;" class="collection-item">{$item['name']}</a>
        		{/if}
        		
        	{/list}
        	<!-- 
            <a href="#!" class="collection-item">郑州</a>
            <a href="#!" class="collection-item active">登封</a>
            <a href="#!" class="collection-item">济源</a>
            <a href="#!" class="collection-item">周口</a>
            <a href="#!" class="collection-item">焦作</a>
            <a href="#!" class="collection-item">安阳</a>
            <a href="#!" class="collection-item">许昌</a>
            <a href="#!" class="collection-item">商丘</a>
            <a href="#!" class="collection-item">南昌</a>
            <a href="#!" class="collection-item">合肥</a>
            <a href="#!" class="collection-item">漯河</a>
            <a href="#!" class="collection-item">驻马店</a>
            <a href="#!" class="collection-item">平顶山</a>
            <a href="#!" class="collection-item">南阳</a>
            <a href="#!" class="collection-item">新乡</a>
            <a href="#!" class="collection-item">上街</a>
            -->
        </div>
    </div>
    <div class="col s4">
        <div class="collection" id="div_city">
        	{list:items=$city_list key=$i}
	        	{if:$i==0}
	        		<a id="{$item['id']}" href="javascript:;" class="collection-item active">{$item['name']}</a>
	        	{else:}
	        		<a id="{$item['id']}" href="javascript:;" class="collection-item">{$item['name']}</a>
	        	{/if}
        	{/list}
        	<!-- 
            <a href="#!" class="collection-item">郑州</a>
            <a href="#!" class="collection-item active">登封</a>
            <a href="#!" class="collection-item">济源</a>
            <a href="#!" class="collection-item">周口</a>
            <a href="#!" class="collection-item">焦作</a>
            <a href="#!" class="collection-item">安阳</a>
            <a href="#!" class="collection-item">许昌</a>
            <a href="#!" class="collection-item">商丘</a>
            <a href="#!" class="collection-item">南昌</a>
            <a href="#!" class="collection-item">合肥</a>
            <a href="#!" class="collection-item">漯河</a>
            <a href="#!" class="collection-item">驻马店</a>
            <a href="#!" class="collection-item">平顶山</a>
            <a href="#!" class="collection-item">南阳</a>
            <a href="#!" class="collection-item">新乡</a>
            <a href="#!" class="collection-item">上街</a>
            -->
        </div>
    </div>
    <div class="col s4">
        <div class="collection" id="div_county">
        	{list:items=$county_list}
        		<a id="{$item['id']}" href="javascript:;" class="collection-item">{$item['name']}</a>
        	{/list}
        	<!-- 
            <a href="#!" class="collection-item">郑州</a>
            <a href="#!" class="collection-item active">登封</a>
            <a href="#!" class="collection-item">济源</a>
            <a href="#!" class="collection-item">周口</a>
            <a href="#!" class="collection-item">焦作</a>
            <a href="#!" class="collection-item">安阳</a>
            <a href="#!" class="collection-item">许昌</a>
            <a href="#!" class="collection-item">商丘</a>
            <a href="#!" class="collection-item">南昌</a>
            <a href="#!" class="collection-item">合肥</a>
            <a href="#!" class="collection-item">漯河</a>
            <a href="#!" class="collection-item">驻马店</a>
            <a href="#!" class="collection-item">平顶山</a>
            <a href="#!" class="collection-item">南阳</a>
            <a href="#!" class="collection-item">新乡</a>
            <a href="#!" class="collection-item">上街</a>
            -->
        </div>
    </div>
    
    <input type="hidden" id="hid_sel_city_id"/>
    <input type="hidden" id="hid_sel_county_id"/>
</div>

<script type="text/javascript">



function reset_bing_city_a_event()
{
	 $("#div_city a").each(function(i){
 		$(this).click(function(){
 			$(this).attr('class',"collection-item active");
 			$("#div_city a").not(":eq("+i+")").attr("class", "collection-item");
 			
 			change_county($(this).attr('id'));
 			
 			$("#hid_sel_city_id").val($(this).attr('id'));
 			$("#hid_sel_county_id").val('');
 		});
 	});
}

function reset_bing_county_a_event()
{
	 $("#div_county a").each(function(i){
 		$(this).click(function(){
 			if($("#hid_sel_city_id").val() == "")
 			{
 				alert('请先选择市');
 				return;
 			}
 			$(this).attr('class',"collection-item active");
 			$("#div_county a").not(":eq("+i+")").attr("class", "collection-item");
 			
 			$("#hid_sel_county_id").val($(this).attr('id'));
 			
 		});
 	});
}


$(document).ready(function(){
	$("#div_province a").each(function(i){
		$(this).click(function(){
			$(this).attr('class',"collection-item active");
			$("#div_province a").not(":eq("+i+")").attr("class", "collection-item");
			change_city($(this).attr('id'));
			
			//将区隐藏
			$("#div_county").hide();
			
			$("#hid_sel_city_id").val('');
			$("#hid_sel_county_id").val('');
		});
	});
	
	
	reset_bing_city_a_event();
	reset_bing_county_a_event();
	/*
	$("#div_city a").each(function(i){
		$(this).click(function(){
			$(this).attr('class',"collection-item active");
			$("#div_city a").not(":eq("+i+")").attr("class", "collection-item");
			
			//change_county($(this).attr('id'));
		});
	});
	*/
	
});



function change_city(id)
{
	$.post("{url:/mobile/getCityByProvince2}",{'code':id},function(result){
        $("#div_city").html(result);
        
        //重新绑定事件
        reset_bing_city_a_event();
        
        
    });

}


function change_county(id)
{
	
	$.post("{url:/mobile/getCountyByCity2}",{'code':id},function(result){
        $("#div_county").html(result);
        $("#div_county").show();
        //重新绑定事件
        reset_bing_county_a_event();
	});
}


function onsure()
{
	var sel_city_id   = $("#hid_sel_city_id").val();
	var sel_county_id = $("#hid_sel_county_id").val();
	if(sel_city_id == '' && sel_county_id == '')
	{
		alert('您还没有选择地区');
		return false;
	}
	
	if(sel_county_id != '')
	{
		document.location.href="{url:/mobile/lianmeng_seller}&county="+sel_county_id;
	}
	else
	{
		document.location.href="{url:/mobile/lianmeng_seller}&city="+sel_city_id;
	}
}

</script>

</body>
</html>
